import { Nodes } from '@knno/dom';
import { h, fragment } from '@knno/dom/jsx';
import { borderStyle, vars } from '@knno/ui/global.css';
import { SplitBar, UISplitBar } from '@knno/ui/jsx/splitBar';
import { Toggle } from '@knno/ui/jsx/toggle';

export function ShowSplitBar() {
	let leftDiv: Nodes;
	let topDiv: Nodes;
	let width: number;
	let height: number;
	let spliter: UISplitBar;
	return (
		<>
			<h2>分割条</h2>
			<div class={borderStyle} style={{ height: '500px', display: 'flex' }}>
				<div
					ref={(r) => (leftDiv = r)}
					style={{
						background: vars.color.workspaceBackground,
						width: '400px',
						wordBreak: 'break-all',
						overflow: 'hidden',
						boxSizing: 'border-box',
					}}
				>
					左侧的部分
				</div>
				<SplitBar
					type="horizontal"
					onmovestart={(e) => {
						width = leftDiv.width();
					}}
					onmove={(e) => {
						const newWidth = width + e.detail.distance;
						leftDiv.css('width', newWidth + 'px');
					}}
				/>
				<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
					<div ref={(r) => (topDiv = r)} style={{ height: '200px', background: vars.color.baseBackground }}>
						右侧上半部分
					</div>
					<SplitBar
						ref={(r) => (spliter = r)}
						type="vertical"
						disabled
						onmovestart={() => {
							height = topDiv.height();
						}}
						onmove={(e) => {
							const newHeight = height + e.detail.distance;
							topDiv.css('height', newHeight + 'px');
						}}
					/>
					<div style={{ flex: 1, background: vars.color.baseBackground, padding: '1em' }}>
						右侧下半部分，允许移动：
						<Toggle
							checked={false}
							onclick={function (e) {
								spliter.disabled(!this.checked());
							}}
						/>
					</div>
				</div>
			</div>
		</>
	);
}
